<template>
  <div class="ms-list">
    <el-row class="operation">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">
          <icon style="" name="home"></icon>
        </el-breadcrumb-item>
        <el-breadcrumb-item>渠道推广系统</el-breadcrumb-item>
        <el-breadcrumb-item>推广管理</el-breadcrumb-item>
        <el-breadcrumb-item>推广项目</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>

    <ms-search :data="search.list" @click="updateConditions"></ms-search>

    <el-table
      v-loading="table.loading"
      class="element-table"
      size="small" stripe border
      :data="newList"
      :summary-method="getSummaries"
      show-summary
      :highlight-current-row="true"
      :fit="true">
      <el-table-column prop="id" label="ID" min-width="80" fixed="left"></el-table-column>
      <el-table-column prop="title" label="项目名称" min-width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.title !== ''">
            {{ scope.row.title }}
            <sub><a :href="scope.row.website" target="_blank">官网<i class="el-icon-arrow-right"></i></a></sub>
          </span>
          <span v-else>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="industry" label="所属行业" min-width="120"></el-table-column>
      <el-table-column prop="saler" label="销售经理" min-width="80"></el-table-column>
      <el-table-column prop="server" label="客服专员" min-width="80"></el-table-column>
      <el-table-column prop="money" label="现金余额" min-width="80" align="right" header-align="center">
        <template slot-scope="scope">
          {{scope.row.money.toFixed(2)}} 元
        </template>
      </el-table-column>
      <el-table-column prop="beforeYesterdayCostCoin" label="前日消费点数" min-width="80" align="right" header-align="center">
        <template slot-scope="scope">
          {{(scope.row.beforeYesterdayCostCoin === undefined ? 0 : scope.row.beforeYesterdayCostCoin).toFixed(2)}} 点
        </template>
      </el-table-column>
      <el-table-column prop="beforeYesterdayCostMoney" label="前日消费金额" min-width="80" align="right"
                       header-align="center">
        <template slot-scope="scope">
          {{(scope.row.beforeYesterdayCostMoney === undefined ? 0 : scope.row.beforeYesterdayCostMoney).toFixed(2)}} 元
        </template>
      </el-table-column>
      <el-table-column prop="yesterdayCostCoin" label="昨日消费点数" min-width="80" align="right" header-align="center">
        <template slot-scope="scope">
          {{(scope.row.yesterdayCostCoin === undefined ? 0 : scope.row.yesterdayCostCoin).toFixed(2)}} 点
        </template>
      </el-table-column>
      <el-table-column prop="yesterdayCostMoney" label="昨日消费金额" min-width="80" align="right" header-align="center">
        <template slot-scope="scope">
          {{(scope.row.yesterdayCostMoney === undefined ? 0 : scope.row.yesterdayCostMoney).toFixed(2)}} 元
        </template>
      </el-table-column>
      <el-table-column prop="consumeDay" min-width="100" :render-header="renderHeader">
        <template slot-scope="scope">
          <span v-if="scope.row.money < 0" class="ms-danger">已欠费</span>
          <span v-else-if="scope.row.consumeDay >= 7" class="ms-success">可消费 {{ scope.row.consumeDay }} 天</span>
          <span v-else-if="scope.row.consumeDay > 0 && scope.row.consumeDay < 7"
                class="ms-warning">可消费 {{ scope.row.consumeDay }} 天</span>
        </template>
      </el-table-column>
      <el-table-column prop="lastCostTime" label="最后消费时间" min-width="140"></el-table-column>
      <el-table-column prop="status" label="状态" min-width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 1" class="ms-success">上稿中</span>
          <span v-else-if="scope.row.status === 0" class="ms-gray"><s>已下稿</s></span>
          <span v-else class="ms-danger">审核中</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" fixed="right">
        <template slot-scope="scope">
          <router-link :to="{path: '/customer/item-survey', query: {id: scope.row.id, title: scope.row.title}}"
                       target="_blank">问卷反馈
          </router-link>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="pagination"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page.sync="pagination.page"
      :total="pagination.totalRow"
      :page-size="pagination.pageSize"
      :page-sizes="pagination.pageSizes"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
  import MsSearch from '@/components/common/Search.vue'
  import MsConfirmButton from '@/components/common/ConfirmButton.vue'
  import Api from '@/api/customer/items'
  import { SEARCH_CONDITION } from '@/models/customer/items'
  import ResponseParse from '@/utils/response-parse'

  export default {
    components: {
      MsSearch,
      MsConfirmButton
    },
    data () {
      return {
        search: {
          list: [],
          condition: {}
        },
        list: [],
        pagination: {},
        table: {
          loading: true
        }
      }
    },
    created () {
      this.search.list = SEARCH_CONDITION
      this.list = []
      this.requestList()
    },
    computed: {
      newList () {
        let list = []
        let _list = this.list
        if (_list !== undefined && _list.length > 0) {
          _list.forEach(value => {
            let data = value
            data.consumeDay = 0
            if (value.yesterdayCostMoney > 0) {
              data.consumeDay = (value.money / value.yesterdayCostMoney).toFixed(2)
            } else if (value.beforeYesterdayCostMoney > 0) {
              data.consumeDay = (value.money / value.yesterdayCostMoney).toFixed(2)
            } else if (value.budget > 0) {
              data.consumeDay = (value.money / value.budget).toFixed(2)
            }
            list.push(data)
          })
        }
        return list
      }
    },
    methods: {
      requestList () {
        this.table.loading = true
        const search = Object.assign({}, this.pagination, this.search.condition)
        Api.list({search: search}, response => {
          let status = response.status || 0
          let body = response.data || []
          if (status === 200 || status === 204) {
            body.forEach(value => {
              if (value.website.length > 0) {
                if (value.website.indexOf('http://') === -1) {
                  value.website = 'http://' + value.website
                }
              }
            })
            this.list = body
            this.pagination = ResponseParse.pagination(response.headers)
          } else {
            this.list = []
            this.$message.error(body.error || '获取数据失败')
          }
          this.table.loading = false
        })
      },
      handleSizeChange (val) {
        this.pagination.pageSize = val
        this.requestList()
      },
      handleCurrentChange (val) {
        this.pagination.page = val
        this.requestList()
      },
      updateConditions (conditions) {
        this.pagination.page = 1
        this.search.condition = conditions
        this.requestList()
      },
      renderHeader (createElement) {
        return [
          createElement('span', ['可消费天数 ']),
          createElement('el-tooltip', {
            attrs: {
              'class': 'el-icon-info',
              'effect': 'dark',
              'content': '够7天消费显示绿色；不足7天消费显示橙色；欠款显示红色',
              'placement': 'top'
            }
          }, [
            createElement('i', {
              attrs: {'class': 'el-icon-info'}
            })
          ])
        ]
      },
      getSummaries (param) {
        let {columns, data} = param
        let sums = []

        if (data.length === 0) {
          return sums
        }

        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
            return
          }

          let values = data.map(item => Number(item[column.property]))
          if (column.property === 'money' || column.property === 'beforeYesterdayCostCoin' ||
            column.property === 'beforeYesterdayCostMoney' || column.property === 'yesterdayCostCoin' ||
            column.property === 'yesterdayCostMoney') {
            if (!values.every(value => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr)
                if (!isNaN(value)) {
                  return prev + curr
                } else {
                  return prev
                }
              }, 0)
            } else {
              sums[index] = 0
            }
          }
          if (column.property === 'money' || column.property === 'beforeYesterdayCostMoney' || column.property === 'yesterdayCostMoney') {
            sums[index] = sums[index].toFixed(2) + '元'
          }
          if (column.property === 'beforeYesterdayCostCoin' || column.property === 'yesterdayCostCoin') {
            sums[index] = sums[index].toFixed(2) + '点'
          }
        })

        return sums
      }
    }
  }
</script>

<style lang="scss">
  .element-table th {
    height: 48px;
  }

  a:link {
    color: #67c23a;
    text-decoration: none;
  }

  a:visited {
    color: #ff4236;
    text-decoration: none;
  }

  a:hover {
    color: #2684FF;
    text-decoration: none;
  }
</style>
